<template>
  <div class="tabCenter">
    <order-search @search="searchAction"></order-search>
    <a-table
      ref="table"
      :rowKey="record => record.orderId"
      :dataSource="orderDataList"
      :columns="columns"
      :pagination="{showSizeChanger:true, showQuickJumper:true, current:orderParams['page'], total:orderTotal, pageSize:orderParams['pagesize']}"
      :loading="orderLoading"
      @change="handleTableChange">
      <template slot="datetime" slot-scope="text,record">
        <div>
          {{ text }}&nbsp;-&nbsp;{{ record.ldsj }}
        </div>
      </template>
      <template slot="zkxm" slot-scope="text">
        <div>
          {{ text|filterZkxm() }}
        </div>
      </template>
      <template slot="status" slot-scope="text,record">
        <div>
          <span :class="colorMsg(record.ddzt,1)">{{ record.ddzt|filterStatus() }}</span>/<span :class="colorMsg(record.rzbz,2)">{{ record.rzbz }}</span>
        </div>
      </template>
      <template slot="action" slot-scope="text,record">
        <div @click="ondetail(record)">
          <a href="javascript:;">查看详情</a>
        </div>
      </template>
    </a-table>
    <order-model ref="orderModeDom"></order-model>
  </div>
</template>
<script>
import OrderSearch from './OrderSearch'
import OrderModel from './OrderModel'
import { mapActions, mapGetters, mapMutations } from 'vuex'

const columns = [{
  title: '订单编号',
  dataIndex: 'ddbh'
}, {
  title: '房屋名称',
  dataIndex: 'fwdz'
}, {
  title: '房号',
  dataIndex: 'fh'
}, {
  title: '入离日期',
  dataIndex: 'rzsj',
  scopedSlots: { customRender: 'datetime' }
}, {
  title: '入住客人',
  dataIndex: 'zkxm',
  scopedSlots: { customRender: 'zkxm' }
},
{
  title: '入住\\认证状态',
  dataIndex: 'ddzt',
  scopedSlots: { customRender: 'status' }
},
{
  title: '操作',
  width: '200px',
  dataIndex: 'action',
  scopedSlots: { customRender: 'action' }
}]
export default {
  name: 'OrderContent',
  components: {
    OrderSearch,
    OrderModel
  },
  data () {
    return {
      columns,
      pagination: { showSizeChanger: true, showQuickJumper: true },
      loading: false
    }
  },
  computed: {
    selStatus () {
      return this.orderListMenu
    },
    ...mapGetters([
      'orderListMenu',
      'orderDataList',
      'orderParams',
      'orderLoading',
      'orderTotal',
      'userInfo',
      'STORE_ID', // 门店ID
      'OPERATOR_TYPE'
    ])
  },
  created () {
    this.filterParams(true)
    this.searchAjax()
  },
  filters: {
    filterStatus (value) {
      var text = ''
      switch (value) {
        case '1':
          text = '待入住'
          break
        case '2':
          text = '入住中'
          break
        case '3':
          text = '已退房'
          break
        case '4':
          text = '已取消'
          break
        default:
          text = '无信息'
          break
      }
      return text
    },
    filterZkxm (val) {
      const userNames = val.slice(0, -1)
      return userNames
    }
  },
  methods: {
    ...mapMutations([
      'setOrderParams'
    ]),
    ...mapActions([
      'getorderListMenuMsg'
    ]),
    // 分页触发函数
    handleTableChange (pagination, filters, sorter) {
      const pager = { ...pagination }
      const params = {}
      params.page = pager.current
      params.pagesize = pager.pageSize
      this.setOrderParams(params)
      this.searchAjax()
    },
    // 搜素请求函数
    searchAjax () {
      this.getorderListMenuMsg(this.orderParams).then(res => { }).catch(() => {})
    },
    /* 状态color切换
    *@val 1 是入住
    *     2 是登记 */
    colorMsg (value, val2) {
      var type = ''
      if (val2 === 1) {
        switch (value) {
          case '1':
            type = 'orange'
            break
          case '2':
            type = 'green'
            break
          case '3':
            type = ''
            break
          case '4':
            type = 'red'
            break
          default:
            type = ''
            break
        }
      } else if (val2 === 2) {
        if (value === '未认证') {
          type = 'red'
        } else {
          type = 'green'
        }
      }
      return type
    },
    // 点击搜素按钮
    searchAction (value) {
      this.searchAjax()
    },

    filterParams (init) {
      const params = {}
      params.hoperatorId = this.userInfo.id
      params.storesId = this.STORE_ID
      params.jylx = this.OPERATOR_TYPE
      if (init) {
        params.gjc = ''
        params.page = 1
        params.pagesize = 10
      }
      this.setOrderParams(params)
    },
    // 查看详情
    ondetail (val) {
      this.$refs.orderModeDom.handleOrderDetails(val)
    }
  }
}
</script>
<style>
.tabCenter{margin-left: 200px;background-color:#fff;}
.editable-cell {
  position: relative;
}

.editable-cell-input-wrapper,
.editable-cell-text-wrapper {
  padding-right: 24px;
}

.editable-cell-text-wrapper {
  padding: 5px 24px 5px 5px;
}
.editable-cell-icon,
.editable-cell-icon-check {
  position: absolute;
  right: 0;
  width: 20px;
  cursor: pointer;
}

.editable-cell-icon {
  line-height: 18px;
  display: none;
}

.editable-cell-icon-check {
  line-height: 28px;
}

.editable-cell:hover .editable-cell-icon {
  display: inline-block;
}

.editable-cell-icon:hover,
.editable-cell-icon-check:hover {
  color: #108ee9;
}

.editable-add-btn {
  margin-bottom: 8px;
}
.red{color:#F17171;}
.green{color:#4ABFA8;}
.orange{color:#F6AE35;}
.ant-table-thead > tr > th{color:#999;background:#FAFAFA}
.ant-table-pagination.ant-pagination{padding-right:10px;}
</style>
